<template>
	<div class="bg-white">
		
		
		<div class="shadow rounded overflow-hidden mt-3">
			<div class="bg-main p-2">
				<span>预约基本信息</span>
			</div>
				<div>
					<Row class="">
						<Col class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
						<div class="bg-f-fuguang rounded  p-2">
								<div>教练名称</div>
								<div>{{ajiaolian.jlname}}</div>
							</div>
						</Col>
						<Col class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
						<div class="bg-qingbai rounded  p-2">
								<div>联系方式</div>
								<div>{{ajiaolian.tel}}</div>
							</div>
						</Col>
						<Col class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
						<div class="bg-danfen rounded  p-2">
								<div>预约金额</div>
								<div>¥{{aroomyyjl.amont}}</div>
						</div>
						</Col>
						<Col class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
						<div class="bg-qingbai rounded  p-2">
								<div>预约时间</div>
								<div>{{aroomyyjl.ct}}</div>
							</div>
						</Col>
					</Row>
				</div>
		</div>		
		<div class="shadow rounded overflow-hidden mt-3" >
			<div class="bg-main p-2">
				<span>预约场地详细信息</span>
			</div>
			<div v-if="aroomyyjlitems.length > 0">
				<Row>
					<Col v-for="(item,index) in aroomyyjlitems" :key="index"
					class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
					<div class="shadow rounded p-2">
						<div class="d-flex justify-content-between" >
							<span>店铺名称</span>
							<span>{{item.sname}}</span>
						</div>
						<div class="d-flex justify-content-between">
							<span>店长名称</span>
							<span >{{item.dname}}</span>
						</div>
						<div class="d-flex justify-content-between">
							<span>房间名称</span>
							<span>{{item.rname}}</span>
						</div>
						<div class="d-flex justify-content-between">
							<span>课程单节编号</span>
							<span v-if="null == item.kcitemid">{{item.kcitemid}}</span>
							<span>——</span>
						</div>
						<div class="d-flex justify-content-between">
							<span>课程单节名称</span>
							<span v-if="null == item.kcitemid">{{item.itemname}}</span>
							<span>——</span>
						</div>
						<div class="d-flex justify-content-between">
							<span>课程单节日期</span>
							<span>{{item.cd}}</span>
						</div>
						<div class="d-flex justify-content-between">
							<span>单节开始时间</span>
							<span v-if="null == item.kcitemid">{{item.kcitemst}}</span>
							<span>——</span>
						</div>
						<div class="d-flex justify-content-between">
							<span>单节结束时间</span>
							<span v-if="null == item.kcitemid">{{item.kcitemet}}</span>
							<span>——</span>
						</div>
					</div>
					</Col>
				</Row>
				<div>
					<Page class="text-right mt-3" :page-size="tableInfo.size" @on-change="pageSearch"
						:total="tableInfo.total" />
				</div>
			</div>
			<div v-else class="d-flex justify-content-center p-1">
				暂无数据
			</div>
			
		</div>
		

		</div>
		



	</div>
</template>

<script>
	export default {
		data() {
			return {
				aroomyyjlitems: [],
				aroomyyjl: {},
				ajiaolian:{},
				tableInfo: {
					current: 0,
					size: 6,
					total: 0
				}				
			}
		},
		created: function() {
			this.aroomyyjl.rmorderid = this.$route.query.rmorderid;
			this.tableInfo.current = 1;
			this.loadData();
		},
		mounted: function() {},
		methods: {
			loadData: function() {
				this.http.get({
					url: "/yyjl/info",
					params: {
						// 传一个当前页
						current: this.tableInfo.current,
						size: this.tableInfo.size,
						rmorderid: this.aroomyyjl.rmorderid
					}
				}).then(res => {
					console.log("yyjldetail");
					console.log(res);
					this.tableInfo.current = res.current;
					this.tableInfo.total = res.total;
					this.tableInfo.size = res.size;
					this.aroomyyjl = res.aroomyyjl;
					this.ajiaolian = res.ajiaolian;
					this.aroomyyjlitems = res.aroomyyjlitems;
					
				});
			},
			pageSearch: function(changedPage) {
				this.tableInfo.current = changedPage;
				this.loadData();
			}
		},
	}
</script>

<style>
</style>